<!-- 基础设置 -> 账套设置 -> 基本信息 -->
<template>
    <div class="set-wrapper">
        <a-form :form="form">
            <a-row>
                <a-col :span="10">
                    <a-form-item label="账套名称" v-bind="formItemLayout" >
                        <a-input disabled type="text" autocomplete="false" placeholder="请输入账套名称" :value="postData.accountName || userInfo.companyName"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="2"></a-col>
                <a-col :span="10">
                    <a-form-item label="法人代表" v-bind="formItemLayout">
                        <a-input allowClear type="text" autocomplete="false" placeholder="请输入法人代表" v-decorator="['legalPerson']"></a-input>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="10">
                   <a-form-item v-bind="formItemLayout" label="本位币">
                        <a-select placeholder="请选择本位币" v-decorator="['baseCurrencyName']" @change="onSelectCurrency">
                            <a-select-option v-for="(item, index) in currencyList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="2"></a-col>
                <a-col :span="10">
                    <a-form-item label="邮政编码" v-bind="formItemLayout">
                        <a-input allowClear type="text" autocomplete="false" placeholder="请输入邮政编码" v-decorator="['postalCode']"></a-input>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="10">
                    <a-form-item v-bind="formItemLayout" label="企业类型">
                        <a-select placeholder="企业类型" @change="industryChange" v-decorator="[
                'companyType',
                {
                  rules: [{ required: true, message: '请选择企业类型' }]
                }
              ]">
                            <a-select-option v-for="(item, index) in companyTypeList" :key="index" :value="item">{{ item }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="2"></a-col>
                <a-col :span="10">
                    <a-form-item v-bind="formItemLayout" label="会计制度">
                        <a-select placeholder="请选择会计制度" @change="industryChange" v-decorator="[
                'companyIndustry',
                {
                  rules: [{ required: true, message: '请选择会计制度' }]
                }
              ]">
                            <a-select-option v-for="(item, index) in industryList" :key="index" :value="item.name">{{ item.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="10">
                    <a-form-item label="联系电话" v-bind="formItemLayout">
                        <a-input allowClear type="text" autocomplete="false" placeholder="请输入联系电话" v-decorator="['contactNumber']"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="2"></a-col>
                <a-col :span="10">
                    <a-form-item v-bind="formItemLayout" label="行政区">
                        <a-cascader placeholder="请选择行政区" :field-names="{
                label: 'title',
                value: 'title',
                children: 'children'
              }" v-decorator="[
                'areaName',
              ]" :options="regions" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="10">
                    <a-form-item label="开户银行" v-bind="formItemLayout">
                        <a-input allowClear type="text" autocomplete="false" placeholder="请输入开户银行" v-decorator="['openingBank']"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="2"></a-col>

                <a-col :span="10">
                    <a-form-item v-bind="formItemLayout" label="报税地区">
                        <a-select placeholder="请选择报税地区" v-decorator="['taxArea']">
                            <a-select-option v-for="(item, index) in taxAreaList" :key="index" :value="item.areaName">{{ item.areaName }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="10">
                    <a-form-item label="统一代码" v-bind="formItemLayout">
                        <a-input allowClear type="text" autocomplete="false" placeholder="请输入统一代码" v-decorator="['unifiedSocialCode']"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="2"></a-col>
                <a-col :span="10">
                    <a-form-item v-bind="formItemLayout" label="纳税性质">
                        <a-select placeholder="请选择纳税性质" v-decorator="['taxNature']">
                            <a-select-option v-for="(item, index) in taxNatureList" :key="index" :value="item">{{ item }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="10">
                    <a-form-item label="税率%" v-bind="formItemLayout">
                        <a-input allowClear type="number" min="0" max="100" autocomplete="false" placeholder="请输入税率" v-decorator="['taxRate']"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="2"></a-col>
                <a-col :span="10">
                    <a-form-item v-bind="formItemLayout" label="备注">
                        <a-input allowClear type="text" autocomplete="false" placeholder="请输入备注" v-decorator="['remarks']"></a-input>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="10">
                    <a-form-item label="账套主管" v-bind="formItemLayout">
                        <input-group-search modalTitle="选择账套主管" labelStyle="display:none;" rightClass="myRightClass" class="mb-2" v-model="accMaster.accountMasterId" :valueTitle.sync="accMaster.accountMasterName" treeType="officeUser" :clearValueIcon="false"></input-group-search>
                    </a-form-item>
                </a-col>
            </a-row>
            <!-- <a-row>
        <a-col :span="10">
          <a-form-item label="首年启用期间" v-bind="formItemLayout">
            <a-select
              style="width:100%"
              v-decorator="[
                'enableDuration',
                {
                  rules: [{ required: true, message: '首年启用期间' }]
                }
              ]"
            >
              <a-select-option
                v-for="(item, index) in DurationList"
                :key="index"
                :value="item"
                >{{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row> -->
        </a-form>
    </div>
</template>
<script>
import { areaPageListToTreeForId } from "@/utils/tree";
import { treeList } from "@/api/area";
import { industryList } from "@/api/industry";
import { add as AddAccount, edit as EditAccount } from "@/api/erp/account";
import { pageList as listCurrency  } from "@/api/erp/currency";
import { mapState } from "vuex";
import store from "@/store";

export default {
    data() {
        return {
            isFirstYear: false,
            postData: {},
            //表单信息
            // form: this.$form.createForm(this, { name: "accountForm" }),
            //输入框布局
            formItemLayout: {
                labelCol: { span: 10 },
                wrapperCol: { span: 14 }
            },
            companyTypeList: ["工业", "商业", "服务业", "金融业"],
            //报税地区列表
            taxAreaList: [],
            //纳税性质列表
            taxNatureList: ["一般纳税人", "小规模税人"],
            currencyList:[],          //货币列表
            //行政区信息
            regions: [],
            //行业信息列表
            industryList: [],
            //账套主管信息
            accMaster: {},
            DurationList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            enableDuration: moment().month() + 1 //启用期间（首次才可以编辑）
        };
    },
    beforeCreate() {
        this.form = this.$form.createForm(this, { name: "a" });
    },
    created() {
        // this.areaTree();
        this.ListIndustry();
        this.listCurrency();
    },
    computed:{
         ...mapState({
            userInfo: state => state.user.info,
        })
    },
    methods: {
        //加载 区域数据
        areaTree() {
            treeList()
                .then(response => {
                    if (response.code === 200) {
                        const { data } = response;
                        if (data.length == 0) {
                            let _this = this;
                            let isHaveRight = store.getters.permissions.includes("sys:area");
                            let message = "请联系管理员进行‘区域配置’";
                            let okText = "确定";
                            let cancelText = "关闭";
                            if (isHaveRight) {
                                message = "没有配置地区数据,是否现在配置";
                                okText = "马上配置";
                                cancelText = "稍后配置";
                            }
                            this.$confirm({
                                title: '提示',
                                content: <span>{message}</span>,
                                okText,
                                cancelText,
                                onOk() {
                                    if (isHaveRight) {
                                        console.log("准备进入地区配置页面。。。",)
                                        // _this.$router.push("/system/area/list");
                                        window.location.replace("/system/area/list");
                                    }
                                },
                                onCancel() {
                                    console.log("没有地区数据，" + cancelText)
                                },
                            });
                        } else {
                            const childrenNav = [];
                            const province = data.filter(f => f.parentCode == 0);
                            this.taxAreaList = province;
                            areaPageListToTreeForId(data, childrenNav, 0);
                            console.log("加载 区域数据:", data);
                            this.regions = childrenNav;
                        }

                    }
                })
                .catch(error => { });
        },
        //加载会计制度
        ListIndustry() {
            industryList()
                .then(response => {
                    if (response.code === 200) {
                        const { data } = response;
                        this.industryList = data;
                    }
                })
                .catch(error => { });
        },
        //选择会计制度：
        industryChange(value) {
            console.log("选择会计制度：", value);
        },
        //加载 货币列表
        listCurrency(){
            listCurrency()
                .then(response => {
                    if (response.code === 200) {
                        const { data } = response;
                        this.currencyList = data.records;
                    }
                })
                .catch(error => { });
        },

        //初始化 数据
        initData() {
            this.form.resetFields();
            console.log("创建新表单form：", this.form);
            let { postData, isFirstYear, enableDuration } = this;
            console.log("账套编辑初始化数据：", postData);
            //   for (let key in postData) {
            //     console.log("key：", key, ",postData[key]", postData[key]);
            //   }
            this.form.setFieldsValue({ ...postData });
            console.log("获取刚刚赋的值：", this.form.getFieldsValue());
            //行政区 赋值
            if (postData.areaName) {
                let strArr = postData.areaName.split("/");
                this.form.setFieldsValue({
                    areaName: strArr
                });
                console.log(strArr);
            }
            //账套主管 赋值
            if (postData.accountMasterId) {
                let { accountMasterId, accountMasterName } = postData;
                Object.assign(this.accMaster, { accountMasterId, accountMasterName });
            }
            //启用期间 赋值
            if (isFirstYear) {
                console.log("我已经到底", isFirstYear + "", enableDuration);
                this.form.setFieldsValue({
                    enableDuration: enableDuration
                });
            }
        },
        //保存
        save() {
            let { postData, accMaster } = this;
            let saveFun = postData.id ? EditAccount : AddAccount;
            this.form.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    Object.assign(postData, { ...values, ...accMaster });
                    if (postData.areaName) {
                        postData.areaName = postData.areaName.join("/");
                    }

                    console.log("数据提交：", postData);
                    saveFun(postData).then(res => {
                        if (res.code == 200) {
                            this.$message.success("保存成功");
                            this.visible = false;
                            this.$emit("ok", 2);
                        } else {
                            // this.$message.warning(res.message);
                        }
                    });
                }
            });
        },
        //取消
        cancel() {
            this.form.resetFields();
        }
    }
};
</script>
<style lang="less">
.set-wrapper {
    width: 100%;
    .row-left {
        width: 50%;
        float: left;
    }
    .row-right {
        width: 50%;
        float: right;
    }
}
.ant-card-extra {
    padding: 0 !important;
}
.ant-form-item-required {
    font-weight: normal !important;
}
label:not(.form-check-label):not(.custom-file-label) {
    font-weight: normal;
}
.ant-form-item {
    margin-bottom: 10px;
}
.ant-form-item-label > label {
    color: rgba(0, 0, 0, 0.65);
}
</style>